<template>
  <div class="home-header" v-if="visible">
    <me-navbar>
      <i class="iconfont icon-scan" slot="left"></i>
      <div class="search-wrapper" slot="center" @click="toSearch">
        <search-box :ifFakeInput="false"/>
      </div>
      <i class="iconfont icon-msg" slot="right"></i>
    </me-navbar>
  </div>
</template>
<script>
import meNavbar from '@/base/me-navbar'
import searchBox from '@/base/me-search-box'
export default {
  name: 'homeHeader',
  components: {
    meNavbar,
    searchBox
  },
  data () {
    return {
      visible: true
    }
  },
  methods: {
    toSearch () { // 跳转到搜索页
      this.$router.push({ name: 'search' })
    },
    hide () { // 隐藏头部
      this.visible = false
      console.log(this.visible)
    },
    show () { // 显示头部
      this.visible = true
    }
  }
}
</script>
<style lang="stylus" scoped>
.home-header
  transition background-color 2s
  &.header-transition
    background red
  .iconfont
    font-size 20px
</style>
